<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="../plugins/layui/css/layui.css" />
		<script type="text/javascript" src="../plugins/layui/layui.js"></script>
		<style type="text/css">
			.layui-container{
				margin: 10px 0;
			}
			.layui-col-md3{
				width: 17%;
			}
		</style>
	</head>

	<body>

		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md3">
					<!--商品类型-->
					<div class="layui-card layui-block">
						<div class="layui-card-header layui-bg-cyan">选择产品类型</div>
						<div class="layui-card-body">
							
							<!--商品类型 树形图-->
							<ul id="demo"></ul>

						</div>
					</div>
				</div>
				<div class="layui-col-md9">
					<!--商品入库-->
					<div class="layui-card">
						<div class="layui-card-header layui-bg-green">商品入库</div>
						<div class="layui-card-body">

							<!--入库信息-->
							<form class="layui-form" action="">
								<div class="layui-form-item">
									<label class="layui-form-label">商品名称</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入商品名称" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">入库数量</label>
									<div class="layui-input-block">
										<input type="text" name="" required lay-verify="required|number" placeholder="请输入入库数量" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">入库时间</label>
									<div class="layui-input-block">
										<input type="text" class="layui-input" placeholder="请选择入库时间" id="test1">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">入库人</label>
									<div class="layui-input-block">
										<select name="interest" lay-filter="aihao">
											<option value=""></option>
											<option value="0">管理员1号</option>
											<option value="1">管理员2号</option>
											<option value="2">管理员3号</option>
											<option value="3">管理员4号</option>
											<option value="4">管理员5号</option>
										</select>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn layui-bg-green" lay-submit lay-filter="formDemo">立即提交</button>
										<button type="reset" class="layui-btn layui-btn-primary">重置</button>
									</div>
								</div>
							</form>

						</div>
					</div>
				</div>
			</div>

		</div>

		<script type="text/javascript">
			layui.use("tree", function() {
				layui.tree({
					elem: '#demo' //传入元素选择器
						,
					nodes: [ //节点
						 {
							name: '所有类型',
							id: 2,
							spread: true,
							children: [{
								name: '电子产品',
								id: 21,
								spread: false,
								children: [{
									name: '手机',
									id: 211,
									children: [{
										name: '小米',
										id: 2111
									}, {
										name: '华为',
										id: 2112
									}, {
										name: '苹果',
										id: 2113
									}]
								}, {
									name: '电脑',
									id: 212
								}, {
									name: '平板',
									id: 213
								}]
							}, {
								name: '服饰',
								id: 22,
								children: [{
									name: '男装',
									id: 221
								}, {
									name: '女装',
									id: 222
								}, {
									name: '儿童',
									id: 223
								}]
							},{
								name: '食品',
								id: 23,
								children: [{
									name: '面包',
									id: 231
								}, {
									name: '薯条',
									id: 232
								}, {
									name: '饼干',
									id: 233
								}]
							},{
								name: '饮料',
								id: 24,
								children: [{
									name: '果汁',
									id: 241
								}, {
									name: '奶',
									id: 242
								}]
							}]
						}
					],click: function(node){
					    console.log(node) //node即为当前点击的节点数据
					  }  
				});
			})
		</script>

		<script>
			//Demo
			layui.use('form', function() {
				var form = layui.form;

				//监听提交
				form.on('submit(formDemo)', function(data) {
					return false;
				});
			});
			layui.use('laydate', function() {
				var laydate = layui.laydate;

				//执行一个laydate实例
				laydate.render({
					elem: '#test1' //指定元素
				});
			});
		</script>

	</body>

</html>